import {queryRaffleStrategyRuleWeight} from "@/apis";
import {useEffect, useState} from "react";
import {StrategyRuleWeightVO} from "@/types/StrategyRuleWeightVO";

export function StrategyRuleWeight({refresh}) {

    const [strategyRuleWeightVOList, setStrategyRuleWeightVOList] = useState<StrategyRuleWeightVO[]>([]);

    const queryRaffleStrategyRuleWeightHandle = async () => {
        const queryParams = new URLSearchParams(window.location.search);
        const result = await queryRaffleStrategyRuleWeight(String(queryParams.get('userId')), Number(queryParams.get('activityId')));
        const {code, info, data}: { code: string; info: string; data: StrategyRuleWeightVO[] } = await result.json();

        if (code != "0000") {
            window.alert("查询活动账户额度，接口调用失败 code:" + code + " info:" + info)
            return;
        }

        setStrategyRuleWeightVOList(data)
    }

    // 这是你的进度条组件
    const ProgressBar = ({index, total, completed, awards}) => {
        // 计算完成的百分比
        const percentage = (completed / total) * 100;

        return (
            <div className="w-full px-4 py-2 bg-white shadow-md rounded-lg" style={{ maxWidth: '250px' }}>
                <div className="flex items-center justify-between mb-1">
                    <span className="text-sm font-semibold text-gray-800">抽奖阶梯 {index + 1}</span>
                    <div className="flex items-center">
                        <span className="mx-2 text-gray-400">•</span> {/* 分隔点 */}
                        <span
                            className="text-xs font-bold text-gray-600">{completed > total ? total : completed}/{total}</span>
                    </div>
                </div>
                <div className="w-full bg-gray-200 rounded-full h-4 overflow-hidden">
                    <div className="bg-gradient-to-r from-blue-500 to-blue-300 h-full rounded-full"
                         style={{ width: `${percentage}%` }}>
                    </div>
                </div>
                {awards && (
                    <div className="mt-2 text-xs text-gray-700">
                        <strong>必中奖品范围：</strong>
                        {awards.map((award, idx) => (
                            <div key={award.awardId}>{idx + 1}. {award.awardTitle}</div>
                        ))}
                    </div>
                )}
            </div>
        );

    };

    useEffect(() => {
        queryRaffleStrategyRuleWeightHandle().then(r => {
        });
    }, [refresh])

    return (
        <>
            {strategyRuleWeightVOList.map((ruleWeight, index) => (
                <div key={index}>
                    <ProgressBar index={index} total={ruleWeight.ruleWeightCount}
                                 completed={ruleWeight.userActivityAccountTotalUseCount}
                                 awards={ruleWeight.strategyAwards}/>
                </div>
            ))}
        </>
    )
}
